<template>
    <MenuPage 
        ref="menuPage"
        :columns="columns" 
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :query="query"
        @add="showEditModal"
        @queryFun="queryList">
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :title="pageTitle" @ok="handleOk"></EditModal>
    </MenuPage>
</template>
<script>
import EditModal from './edit.vue';
import { mapGetters, mapState, mapMutations } from 'vuex';
import { queryTypeRecord, delTypeRecord } from '../api/typeRecord.js';
import pageTitle from '@/mixin/pageTitle';
export default {
    name: 'ResearchList',
    props: {},
    components: { EditModal },
    mixins: [pageTitle],
    data() {
        return {
            loading: false,
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '名称',
                    key: 'typeName',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                    queryForm:{
                        component:'Input'
                    }
                },
                {
                    title: '创建者',
                    key: 'creatorName',
                    width: 200,
                    tooltip: true,
                    queryForm:{
                        component:'Checkbox',
                        key:'creator',
                        text: '由我创建'
                    }
                },
                {
                    title: '描述',
                    key: 'description',
                    width: 600,
                    tooltip: true,
                },
                {
                    title: '操作',
                    placement: 'top-right',
                    key:'action',
                    width:120,
                    opList:[
                        {
                            txt:'修改',
                            disabled: (data) => data.creator !== this.USER_ID,
                            fun:this.showEditModal
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            disabled: (data) => data.creator !== this.USER_ID,
                            tooltip:true,
                            title: '你确定要删除吗?',
                            fun:this.delItem
                        }
                    ],
                },
            ],
            data: [],
            total: 0
        };
    },
    computed: {
        ...mapState('user', {
            'USER_ID':state => state.userId,
            'isRootDesigner':state => state.isRootDesigner
        })
    },
    watch: {
        
    },
    mounted() {
        this._query = {...this.query};
        this.queryList();
    },
    methods: {
        queryList(type) {
            let query = { ...this.query };
            if (query.creator) {
                query.creator = this.USER_ID;
            } else {
                delete query.creator;
            }
            queryTypeRecord(query)
                .then((res) => {
                    if (res.code == 1) {
                        this.data = res.data.items;
                        this.total = res.data.total;
                    } else {
                        this.data = [];
                        this.total = 0;
                    }
                })
                .finally(() => {
                    
                });
        },
        handleOk(type) {
            type === 'add' ? this.refresh() : this.queryList()
        },
        refresh(){
            this.query = {...this._query,pageSize:this.query.pageSize}
            this.queryList()
        },
        delItem(params) {
            delTypeRecord(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if (
                        this.data.length == 1 &&
                        this.query.pageIndex > 1
                    ) {
                        this.query.pageIndex--;
                    }
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.$refs.editModal.showModal(data);
        },
    },
    beforeDestroy() {},
};
</script>

<style scoped>
.filter-wrap {
    margin-top: 10px;
    font-size: 14px;
    color: #8f90a6;
}
</style>
